<div><span class="btn btn-primary" id="upload-slide">增加一个轮播图</span></div>
<form action="" class="form-inline" role="form">
 <table class="table table-hover">
  <thead>
   <tr>
    <th>轮播图名称</th>
    <th>轮播图链接地址</th>
    <th>轮播图图片</th>
    <th>操作</th>
   </tr>
  </thead>
  <tbody>
   <volist name="moduleSlide.data" id="vo">
    <tr>
     <td>
      <div class="form-group">
       <input type="text" class="form-control" name="title" placeholder="" value="{$vo.title}"/>
      </div>
     </td>
     <td>
      <div class="form-group">
       <input type="text" class="form-control" name="url" placeholder="" value="{$vo.url}"/>
      </div>
     </td>
     <td>
      <div class="images"><img src="{$vo.img}" /></div>
      <input type='hidden' name='pic' value='{$vo.img}'/>
     </td>
     <td>
      <a class="btn btn-danger btn-xs">删除</a>
     </td>
    </tr>
   </volist>
  </tbody>
 </table>
 <div class="margin-top text-center"><a class="btn btn-primary" id="slide-post">提交更改</a></div>
</form>
<div class="pagination">{$pagination}</div>

<style>
 .images{width:150px; height:100px; max-height:100px; overflow:hidden; }
 .images > img{width:100%;}
</style>

<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">

$(function() {
 
  $("#upload-slide").uploadify({
    'multi'           : false,
    'buttonClass'     : 'margin-bottom',
    'fileSizeLimit'   :  '200kb',
    'buttonText'      : '增加一个轮播图',
    'fileTypeDesc'    :  'Image Files',
    'fileTypeExts'    :  '*.jpg; *.png',
    'swf'             :  '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
    'uploader'        :  '__CONTROLLER__/upload',
    'onUploadSuccess' : function(data, res){
      var url = eval("(" + res + ")").extra.url;
          
      var html = "<tr><td><div class='form-group'><input type='text' class='form-control' name='title' placeholder='请输入图片标题'/></div></td>"
               +"<td><div class='form-group'><input type='text' class='form-control' name='url' placeholder='请输入链接地址'/></div></td>"
               +"<td><div class='images'><img src='"+url+"'/></div><input type='hidden' name='pic' value='"+url+"'/></td>"
               +"<td><a class='btn btn-danger btn-xs'>删除</a></td>"
               +"</tr>";
      $("tbody").append(html);
    }
  });
 
  $("tbody").delegate("a.btn-danger", "click", function(){
    $(this).parent().parent().remove();
  });
 
  $("#slide-post").click(function(){
    var _this = this;
    var titleArray = [],
        urlArray = [],
        picArray = [];
    $(".form-inline input[name='title']").each(function(i){
      titleArray.push( $(this).val() );
    });
    $(".form-inline input[name='url']").each(function(i){
      urlArray.push( $(this).val() );
    });
    $(".form-inline input[name='pic']").each(function(i){
      picArray.push( $(this).val() );
    });
    
    var str = "";
    for(var i=0, len=titleArray.length; i<len; i++){
      str += (titleArray[i] + "|" + urlArray[i] + "|" + picArray[i] + ",");
    }
    
    $.post("__CONTROLLER__/indexPost", {data: str}, function(data){
      $(_this).attr("disabled", true);
      if(data.error == 1){
        $().alertMsg({type: "error", msg: data.msg});
      }else if(data.error == 0){
        $().alertMsg({type: "success", msg: data.msg});
      }
      $(_this).removeAttr("disabled");
      return false;
    })
  });
});
</script>